<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
	<style>
		.axis path,
		.axis line{
			fill: none;
			stroke: black;
			shape-rendering: optimizeSpeed;
		}
		.axis text{
			font-size: 12px;
			font-family: sans-serif;
		}
	</style>
</head>
<body>
	<ul>
		<li>使用 path line text 元素绘制</li>
		<li>坐标轴的元素建议新建一个g元素来控制，而不直接放在svg里</li>
		<li>d3.svg.axis() -- 创建一个默认的新坐标轴</li>
		<li><strong>axis</strong></li>
		<li><strong>axis.scale([scale])</strong></li>
		<li><strong>axis.orient([orientation])</strong></li>
		<li><strong>axis.ticks([argument...])</strong></li>
		<li><strong>axis.tickValues([values])</strong></li>
		<li><strong>axis.tickSize([inner,outer])</strong></li>
		<li><strong>axis.innerTickSize([size])</strong></li>
		<li><strong>axis.outerTickSize([size])</strong></li>
		<li><strong>axis.tickFormat([format])</strong></li>
	</ul>
	<div class="axis">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 600;
		var height = 600;
		var svg = d3.select(".axis").append("svg").attr("width",width).attr("height",height);
		//用于坐标轴的线性比例尺
		var xScale = d3.scale.linear()
									.domain([0,10])
									.range([0,300]);

		// 定义坐标轴
		var axis = d3.svg.axis()
								.scale(xScale) //使用比例尺
								.orient("bottom") //刻度方向向下
								.ticks(10)
								.tickValues([0,2,4,6,8,10])
								.tickSize(8,10)
								// .innerTickSize(8)
								// .outerTickSize(10)
								.tickFormat(d3.format("$"))

		//在svg中添加一个包含坐标轴各元素的g元素
		var gAxis = svg.append("g")
							.attr("transform","translate(80,80)");

		//在gAxis中绘制坐标轴
		axis(gAxis) //gAxis.call(axis)

	</script>
</body>
</html>